// components/organisms/TopIconsPrivate.styles.js
import { styled, alpha } from '@mui/material/styles';
import { AppBar, Toolbar, Button, Typography, Box } from '@mui/material';
import { motion } from 'framer-motion';

// Main TopIconsPrivate styles
export const StyledAppBar = styled(AppBar)(({ theme, darkMode, scrolled }) => ({
  background: 'transparent',
  boxShadow: 'none',
  borderBottom: darkMode 
    ? '1px solid rgba(255, 255, 255, 0.05)' 
    : '1px solid rgba(0, 0, 0, 0.05)',
  transition: 'all 0.3s ease',
}));

export const StyledToolbar = styled(Toolbar)(({ theme }) => ({
  display: 'flex', 
  justifyContent: 'space-between',
  padding: theme.spacing(1, 2),
  [theme.breakpoints.up('md')]: {
    padding: theme.spacing(1, 3),
  },
  minHeight: '70px',
}));

export const ModernButton = styled(Button)(({ theme, darkMode }) => ({
  height: '28px',
  fontSize: '0.7rem',
  borderRadius: '4px',
  marginRight: theme.spacing(0.5),
  textTransform: 'none',
  backgroundColor: darkMode 
    ? alpha(theme.palette.common.white, 0.05) 
    : alpha(theme.palette.common.black, 0.03),
  color: darkMode ? theme.palette.common.white : theme.palette.common.black,
  '&:hover': {
    backgroundColor: darkMode 
      ? alpha(theme.palette.common.white, 0.1) 
      : alpha(theme.palette.common.black, 0.07),
  },
  transition: 'all 0.15s ease',
}));

// LogoComponent styles
export const StyledTypography = styled(Typography)(({ fontSize, darkMode, isHomePage }) => ({
  flex: '0 0 auto',
  fontWeight: 400,
  fontSize,
  fontFamily: '"Monoton Regular", "Roboto", sans-serif',
  position: 'relative',
  display: 'inline-block',
  letterSpacing: '0.05em',
  padding: 0,
  margin: 0,
  height: 'auto',
  lineHeight: 1.1,
  border: 'none',
  textTransform: 'none',
  color: isHomePage ? 'white' : (darkMode ? 'white' : 'black'),
}));

export const LogoWrapper = styled(Box)(() => ({
  display: 'flex',
  alignItems: 'center',
  padding: '8px 0px',
  transition: 'all 0.3s ease',
  background: 'transparent',
}));

export const FixedLogoText = styled(motion.div)(({ darkMode, isHomePage }) => ({
  fontFamily: '"Monoton Regular", "Roboto", sans-serif',
  fontSize: '1.2rem',
  fontWeight: 400,
  letterSpacing: '0.05em',
  color: '#40d47e',
  lineHeight: 1.1,
  position: 'relative',
  margin: 0,
  padding: 0,
}));

// Inline styles objects
export const secondToolbarSx = (scrolled) => ({
  display: 'flex', 
  flexDirection: 'row',
  justifyContent: 'flex-start',
  alignItems: 'center',
  padding: { xs: '0.5rem 1rem', md: '0.5rem 2rem' },
  minHeight: 'auto',
  width: '100%',
  opacity: scrolled ? 0.95 : 1,
  transition: 'opacity 0.3s ease'
});

export const dragHandleIconButtonSx = (darkMode) => ({
  backgroundColor: darkMode ? 'rgba(30, 30, 30, 0.8)' : 'rgba(255, 255, 255, 0.8)',
  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
  transition: 'all 0.2s ease',
  ml: 1,
  '&:hover': {
    backgroundColor: darkMode ? 'rgba(40, 40, 40, 0.9)' : 'rgba(245, 245, 245, 0.9)',
    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.3)',
  },
  '&:active': {
    transform: 'scale(0.95)',
  }
});

export const dragHandleIconSx = (darkMode) => ({
  color: darkMode ? '#fff' : '#333',
  fontSize: '1.5rem'
});

export const homeIconSx = (iconSize, darkMode, isHomePageRoute) => ({
  fontSize: iconSize,
  color: isHomePageRoute ? 'white' : (darkMode ? 'white' : 'black'),
  filter: isHomePageRoute || darkMode 
    ? 'drop-shadow(0 0 3px rgba(255, 255, 255, 0.3))' 
    : 'drop-shadow(0 0 3px rgba(0, 0, 0, 0.3))',
});

export const homeIconButtonSx = (iconSize) => ({
  fontSize: iconSize,
  width: iconSize,
  height: iconSize,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  ml: '-5px',
  '&:active': {
    transform: 'scale(0.97)',
  },
});

export const languageButtonSx = {
  padding: '0 12px',
  minWidth: 'auto',
};

export const featurePillSx = (theme, darkMode) => ({
  ml: 2, 
  display: 'flex', 
  alignItems: 'center', 
  height: '24px', 
  borderRadius: '12px',
  px: 1.5,
  backgroundColor: alpha(theme.palette.primary.main, darkMode ? 0.2 : 0.1),
  border: `1px solid ${alpha(theme.palette.primary.main, darkMode ? 0.3 : 0.2)}`,
});

export const featurePillTypographySx = (theme, darkMode) => ({
  fontSize: '0.65rem', 
  fontWeight: 600,
  color: darkMode ? theme.palette.primary.light : theme.palette.primary.main,
  letterSpacing: '0.03em',
  textTransform: 'uppercase'
});

export const menuPaperSx = (theme, darkMode) => ({
  mt: 1,
  '& .MuiPaper-root': {
    borderRadius: '8px',
    backgroundColor: darkMode 
      ? alpha(theme.palette.background.paper, 0.95) 
      : theme.palette.background.paper,
    boxShadow: '0 4px 20px rgba(0, 0, 0, 0.15)',
    backdropFilter: 'blur(10px)',
    border: darkMode 
      ? `1px solid ${alpha(theme.palette.divider, 0.1)}`
      : 'none',
  }
});

export const menuItemSx = (theme, selected = false) => ({
  fontSize: '0.8rem',
  py: 1,
  minWidth: '120px',
  ...(selected && {
    '&.Mui-selected': {
      backgroundColor: alpha(theme.palette.primary.main, 0.1),
    },
  })
});

export const disabledMenuItemSx = {
  fontSize: '0.8rem', 
  opacity: 0.7
};

// Fixed logo styles
export const fixedLogoContainerSx = {
  position: 'fixed',
  top: '10px',
  left: { xs: '10px', sm: '20px' },
  zIndex: 1300,
  display: 'flex',
  flexDirection: 'column',
  alignItems: 'flex-end'
};

// LogoComponent link styles
export const logoLinkStyle = {
  display: 'flex',
  alignItems: 'center',
  textDecoration: 'none',
  cursor: 'pointer',
};

export const logoTextContainerSx = {
  display: 'flex', 
  flexDirection: 'column', 
  alignItems: 'flex-end'
};

export const logoTextSx = {
  lineHeight: 0.8
};

// PortalDraghandleButton styles
export const portalButtonSx = (darkMode, additionalStyle = {}) => ({
  backgroundColor: darkMode ? 'rgba(30, 30, 30, 0.8)' : 'rgba(255, 255, 255, 0.8)',
  boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
  ...additionalStyle
});

export const portalDragIconSx = (darkMode) => ({
  color: darkMode ? '#fff' : '#333',
  fontSize: '1.5rem'
});

